<template>
  <div>
    <h2>当前求和为:{{sum }}</h2>
    <h4>当前求和放大100倍后:{{bigSum}}</h4>
    <select v-model.number="number">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>&nbsp;
    <button @click="JIA(number)">+</button>&nbsp;
    <button @click="JIAN(number)">-</button>&nbsp;
    <button @click="incrementOdd(number)">和为奇数时再+</button>&nbsp;
    <button @click="incrementWait(number)">等500毫秒再+</button>

  </div>
</template>

<script>

import {mapGetters,mapState,mapMutations,mapActions } from "vuex";

export default {
  name: 'Count',
  data() {
    return {

      number: 1
    }
  },
  computed:{
    //借助mapState批量获取vuex中的数据（精简写法）
    ...mapState(['sum']),
    ...mapGetters(['bigSum']),
  },
  methods: {
    // increment() {
    // this.$store.commit('JIA',this.number)
    // },
    // decrement() {
    //   this.$store.commit('JIAN',this.number)
    // },
    ...mapMutations(['JIA','JIAN']),
    ...mapActions(['incrementOdd','incrementWait'])
    // incrementOdd() {
    //   this.$store.dispatch('jiaOdd',this.number)
    // },
    // incrementWait() {
    // setTimeout(()=>{
    //   this.$store.dispatch('jiaWait',this.number)
    // },500)
    // }
  }
}
</script>

<style scoped>

</style>